﻿<template>
  <l-layout class="l-tab-page">
    <l-panel>
      <template #toolLeft>
        <l-query2
          :items="queryItems"
          :formData="queryData"
          :loading="tableLoading"
          @search="handleSearch"
        >
          <template #f_ApplyDate>
            <l-date
              format="yyyy-MM-dd HH:mm:ss"
              dateType="datetimerange"
              v-model="queryData.f_ApplyDate"
              :placeholder="$t('请选择')"
            >
            </l-date>
          </template>
          <template #f_PurchaseNo>
            <el-input
              v-model="queryData.f_PurchaseNo"
              :placeholder="$t('请输入')"
            ></el-input>
          </template>
          <template #f_Theme>
            <el-input
              v-model="queryData.f_Theme"
              :placeholder="$t('请输入')"
            ></el-input>
          </template>
          <template #f_PaymentType>
            <l-select
              :options="f_PaymentTypeOptions"
              v-model="queryData.f_PaymentType"
            ></l-select>
          </template>
          <template #f_Appler>
            <l-user-select
              v-model="queryData.f_Appler"
            ></l-user-select>
          </template>
        </l-query2>
      </template>
      <template #toolRight>
        <l-tool-btns @click="handleAdd()">
        </l-tool-btns>
      </template>
      <l-table
        ref="mainTable"
        :loading="tableLoading"
        :columns="lr_getPageColumns(columns)"
        :dataSource="tableData"
        :isPage="true"
        :pageTotal="tableTotal"
        :tablePage.sync="tableCurrentPage"
        @loadPageData="turnTablePage"
        >
        <l-table-btns
          :btns="tableBtns"
          @click="lr_handleTableBtnClick"
        ></l-table-btns>
      </l-table>
    </l-panel>

    <!--表单-->
    <l-dialog
      :title="$t(formTitle)"
      :visible.sync="formVisible"
      :height="600"
      :width="1024"
      @ok="handleSave"
      @close="handleCloseForm"
      @opened="handleOpenedForm"
    >
      <my-form
        ref="form"
      ></my-form>
    </l-dialog>
  </l-layout>
</template>

<script>
import MyForm from "./form";
const api = window.$api.erp.payinfo
export default {
  components: {
    MyForm,
  },
  data() {
    return {
      lr_isPage:true,

      // 查询参数
      queryData: {
        f_ApplyDate: "",
        f_PurchaseNo: "",
        f_Theme: "",
        f_PaymentType: "",
        f_Appler: "",
      },

      queryItems: [
        { label: "付款日期", prop: "f_ApplyDate", span: 24 },
        { label: "单据编码", prop: "f_PurchaseNo" },
        { label: "主题", prop: "f_Theme" },
        { label: "支付方式", prop: "f_PaymentType" },
        { label: "付款人", prop: "f_Appler" },
      ],

      // 表格参数
      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 50,
      columns: [
        { label: "单据编码",prop: "f_PurchaseNo",minWidth: 120,align: "left"},
        { label: "主题", prop: "f_Theme", minWidth: 120, align: "left" },
        { label: "支付方式",prop: "f_PaymentType",minWidth: 120,align: "left",dataType:'mydata',options:[{"value":"0","label":"现金"},{"value":"1","label":"票汇"},{"label":"信汇","value":"2"},{"label":"电汇","value":"3"},{"label":"承兑","value":"4"},{"label":"信用证","value":"5"}]},
        { label: "付款日期",prop: "f_ApplyDate",width: 160,align: "left",dataType:'datetime'},
        { label: "付款人", prop: "f_Appler", width: 80, align: "left",dataType:'user'  },
        { label: "付款单位",prop: "f_Department",minWidth: 120,align: "left",dataType:'company'},
        { label: "付款金额", prop: "f_Total", minWidth: 120, align: "left" },
        { label: "备注", prop: "f_Description", minWidth: 120, align: "left" },
      ],
      tableBtns: [
        { prop: "Edit", label: "编辑" },
        { prop: "Delete", label: "删除" },
      ],

      // 表单参数
      formVisible: false,
      formTitle: "",
      formEditRow: null,
      formEdit: false,

    
    };
  },
  computed: {
    f_PaymentTypeOptions() {
      return [
        { value: "-1", label: "==请选择==" },
        { value: "0", label: "现金" },
        { value: "1", label: "票汇" },
        { label: "信汇", value: "2" },
        { label: "电汇", value: "3" },
        { label: "承兑", value: "4" },
        { label: "信用证", value: "5" },
      ];
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.loadTableData();
    },

    handleSearch() {
      this.loadTableData();
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let queryData = this.$deepClone(this.queryData);
      if (!this.$validatenull(queryData.f_ApplyDate)) {
        queryData.f_ApplyDate_end = queryData.f_ApplyDate.split(" - ")[1];
        queryData.f_ApplyDate = queryData.f_ApplyDate.split(" - ")[0];
      }

      queryData.rows = this.tablePageSize;
      queryData.page = this.tableCurrentPage;
      queryData.sidx = "F_Id";
      let data = await this.$awaitWraper(api.getPage(queryData));
      if (data != null) {
        this.tableData = data.rows;
        this.tableTotal = data.records;
      } else {
        this.tableData = [];
      }
      this.tableLoading = false;
    },

    handleAdd() {
      this.formEdit = false;
      this.handleShowForm('新增付款单');
    },
    handleEdit($index, row) {
      this.formEdit = true;
      this.formEditRow = row;
      this.handleShowForm('编辑付款单');
    },
    handleDelete($index, row) {
      this.$confirm(
        this.$t("此操作将永久删除该数据, 是否继续?"),
        this.$t("提示"),
        {
          confirmButtonText: this.$t("确定"),
          cancelButtonText: this.$t("取消"),
          type: "warning",
        }
      )
        .then(async () => {
          this.tableData.splice($index, 1);
          this.tableTotal--;
          await api.remove(row.f_Id);
          this.$message({
            type: "success",
            message: this.$t("删除成功!"),
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("已取消删除!"),
          });
        });
    },

    async handleSave(showLoading, hideLoading) {
      if (await this.$refs.form.validateForm()) {
        showLoading();
        const postData = this.$refs.form.getForm();
        let res = "";
        if (this.formEdit) {
          // 编辑
          res = await this.$awaitWraper(
            api.update(this.formEditRow.f_Id, postData)
          );
        } else {
          // 新增
          res = await this.$awaitWraper(api.add(postData));
        }
        if (res) {
          this.$message({
            type: "success",
            message: this.$t("保存成功!"),
          });
          this.loadTableData();
          this.formVisible = false;
        }

        hideLoading();
      }
    },

    handleShowForm(text) {
      this.formTitle = text;
      this.formVisible = true;
    },
    async handleOpenedForm(showLoading, hideLoading) {
      if (this.formEdit) {
        showLoading("加载数据中...");
        let data = await this.$awaitWraper(
          api.get(this.formEditRow.f_Id)
        );
        if (data) {
          this.$refs.form.setForm(data);
        }

        hideLoading();
      }
    },
    handleCloseForm() {
      this.$refs.form.resetForm();
    },
  },
};
</script>
